<template>
	<div>
		<toubu></toubu>
		<div class="banner">
			<img :src="img" />
			<div class="jies">影片简介</div>
			<div class="ziliao">导　　演：{{detail.director}}</div>
			<div class="ziliao">主　　演：{{name}}</div>
			<div class="ziliao">地区语言：{{yuyan}}</div>
			<div class="ziliao">类　　型：{{detail.category}}</div>
			<div class="ziliao">上映日期：{{detail.premiereAt | formatDate}}</div>
			<div class="neir">{{detail.synopsis}}</div>
			<div class="buttfu">
				<button class="butt">立即购票</button>
			</div>
		</div>
	</div>
</template>

<script>
	import Toubu from './toubu.vue';
	import $ from 'jquery';
	export default {
		data: function() {
			return {
				detail: {},
				img: '',
				title: '',
				name: '',
				yuyan: ''
			}
		},
		filters: {
			'formatDate': function(val) {
				var time = new Date(val);
				var m = time.getMonth() + 1;
				var d = time.getDate();
				return m + '月' + d + '日上映';
			}
		},
		components: {
			Toubu
		},
		mounted: function() {
			console.log(this.$route.params.id)
			// 请求详情的数据
			var url = 'http://localhost:3000/' + this.$route.params.id + '?time=' + new Date().getTime();
			var that = this;
			$.get(url, function(res) {
				console.log(res)
				that.detail = res.data.film;
				that.img = res.data.film.cover.origin;
				that.title = res.data.film.name;
				that.yuyan = res.data.film.nation + "(" + res.data.film.language + ")";

				var att = res.data.film.actors
				var str = '';
				for(var i = 0; i < att.length; i++) {
					str += att[i].name + ' | '
				}
				that.name = str.substr(0, str.length - 2)

			})
		}
	}
</script>

<style>

</style>